<template>
	<view class="tabs">
		   <view class="tabs_title">
		        <view v-for="(item,index) in tabsC"
		        :class="'title_item '+[item.isActive?'active':'']"
		        @click="handleItemTap(index)"
		        >
				
		             {{item.name}}
		        </view>
		    </view>
		    <view class="tabs_content">
		        <slot></slot>
		    </view>
	</view>
</template>

<script>
	export default {
		name:"Tabs",
		props:{
			tabsC: {
				type: Array
			}
		},
		data() {
			return {
				// tabsData:[]
			};
		},
		computed:{
			tabsData:{
				get(){
					return this.tabsC
				},
				set(){
					this.$forceUpdate()
				}
			}
		},
		
    methods: {
        handleItemTap(index){
				console.log('发布历史tabs被点击了')
				this.tabsData=this.tabsData.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
				this.$emit('bindhandleItemChange',index);
			
            
        }
    }		
	}
</script>

<style lang="scss">
.tabs{
	margin-bottom:20rpx ;
}
.tabs_title{
    display: flex;
    padding: 10rpx 0;
	padding-bottom: 4rpx;
	
}
.active{
    color: red;
    border-bottom: 5rpx solid currentColor;
	
}
.title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
	padding-bottom: 16rpx;
}
.tabs_content{

}
</style>
